<template>
  <view class="brightness-page">
    <view class="panel">
      <text class="title">屏幕亮度</text>
      <view class="row">
        <uni-icons type="sun" size="22" color="#999" />
        <slider class="slider" :value="val" min="0" max="100" step="1" @changing="onChanging" @change="onChange" />
        <uni-icons type="sun" size="22" color="#333" />
      </view>
      <text class="tips">当前：{{ (val/100).toFixed(2) }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      val: 50
    }
  },
  onLoad() {
    // 读取当前亮度
    // #ifdef APP-PLUS || MP
    uni.getScreenBrightness({
      success: (res) => {
        const v = Number(res.value)
        if (!isNaN(v)) this.val = Math.round(v * 100)
      },
      fail: () => {
        this.$modal && this.$modal.msg('当前端不支持读取亮度')
      }
    })
    // #endif
  },
  methods: {
    setBrightness(num) {
      // 限定 0~1
      let v = Math.max(0, Math.min(1, num))
      // #ifdef APP-PLUS || MP
      uni.setScreenBrightness({ value: v })
      // #endif
      // #ifndef APP-PLUS || MP
      this.$modal && this.$modal.msg('当前端不支持调节亮度')
      // #endif
    },
    onChanging(e) {
      const v = e.detail.value
      this.val = v
      this.setBrightness(v / 100)
    },
    onChange(e) {
      const v = e.detail.value
      this.val = v
      this.setBrightness(v / 100)
    }
  }
}
</script>

<style lang="scss" scoped>
.brightness-page { background: #f5f5f5; min-height: 100vh; }
.panel { margin: 20rpx; padding: 30rpx; background: #fff; border-radius: 16rpx; }
.title { display: block; text-align: center; font-size: 32rpx; color: #333; margin-bottom: 30rpx; }
.row { display: flex; align-items: center; }
.slider { flex: 1; margin: 0 20rpx; }
.tips { display: block; text-align: center; color: #999; margin-top: 10rpx; }
</style>
